<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="main">
            <div class="main-mains">
                <div class="main-content">
                    <div class="main-mains-top">
                        <router-link to="/pointsNews" class="item">有积分资讯文章列表</router-link>
                        <router-link to="/noPointsNews" class="item">无积分资讯文章列表</router-link>
                        <!-- <span class="item" :class="{active:urlPoints == 1}" @click="toggleMemu(1)">有积分资讯分类</span> -->
                        <span class="item" :class="{active:urlPoints == 0}" @click="toggleMemu(0)">无积分资讯分类</span>
                    </div>
                    <div class="screen clear">
                        <div class="fl" @click="addNewsCategory()">新建分类</div>
                    </div>
                     <div class="publicTable toLongTable">
                        <table class="head_table">
                            <tr>
                                <td width="10%">序号</td>
                                <td width="10%">显示顺序</td>
                                <td width="14%">分类名称</td>
                                <td width="14%">分类图标</td>
                                <td width="14%">首页推荐</td>
                                <td width="14%">状态</td>
                                <td width="14%">操作</td>
                            </tr>
                        </table>
                        <el-scrollbar>
                            <table class="content_table">
                                <tr v-for="(item,index) in listData" :key="index" :class="{active:index%2==1}">
                                    <td width="10%">
                                        {{(index + 1) + 10 * (pages - 1)}}
                                    </td>
                                    <td width="10%">{{item.sort}}</td>
                                    <td width="14%"><router-link class="active" :to="'/editNewsCategory?points='+urlPoints+'&type=againEdit&categoryId='+item.id">{{item.name}}</router-link></td>
                                    <td width="14%"><img :src="item.img_url" class="tdimg"/></td>
                                    <td width="14%">{{item.is_first == 1 ? "是" : "否"}}</td>
                                    <td width="14%">{{item.status == 1 ? "显示" : "不显示"}}</td>
                                    <td width="14%" class="operation">
                                       <router-link class="active" :to="'/editNewsCategory?points='+urlPoints+'&type=againEdit&categoryId='+item.id">修改</router-link>
                                       <span class="active" @click="deleteNewsCategory(item.id)">删除</span>
                                    </td>
                                </tr>
                            </table>
                        </el-scrollbar>
                    </div>
                    <div class="nodataTip" v-if="showNodataTip">
                        <i class="iconfont icon-zanwuneirong"></i>
                        <h5>暂无内容</h5>
                    </div>
                    <div class="orderBotom">
                        <div class="orderBotomRight">
                            <el-pagination @current-change="handleCurrentChange" :page-size="10" :current-page.sync="currentPage" layout="total, prev, pager, next" :total='totalnum'>
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import leftBar from "@/components/leftBar";
import topBar from "@/components/topBar";
import newsMan from "@/api/newsMan";
export default {
  components: {
    leftBar,
    topBar
  },
  data() {
    return {
      data: "newsman",
      pages: 1,
      currentPage:2,
      listData: [],
      totalnum: 0,
      showNodataTip: false,
      urlPoints:""
    };
  },
  mounted() {
    this.urlPoints = this.getUrlParam("points");
    this.getCategory(this.urlPoints);
  },
  methods: {
      toggleMemu(num){
          this.urlPoints = num;
          this.getCategory(num);
      },
      //获取分类
    getCategory(num) {
      let _this = this;
      this.listData = [];
      this.showNodataTip = false;
      let options;
      options = {
        score: num,
        page_index:this.pages,
        page_size:10
      };
      newsMan.getCategoryList(options).then(function(res) {
        if (res.code == 1) {
          _this.listData = res.data.data;
          _this.totalnum = res.data.count;
          if (!res.data.count) {
            _this.showNodataTip = true;
          }
        }
      });
    },
    handleCurrentChange(val) {
      this.pages = val;
      this.currentPage = val;
      this.getCategory(this.urlPoints);
    },
    //删除分类
    deleteNewsCategory(id){
        let options;
        let op = [id]
        op  = JSON.stringify(op);
        options = {category_id:op}
        newsMan.deleteNewsCategory(options).then(res => {
        if (res.code == 1) {
          this.successfulAlert("操作成功");
          this.getCategory(this.urlPoints);
        }
      });
    },
    addNewsCategory() {
      this.$router.push("/editNewsCategory?points="+this.urlPoints+"&type=add");
    },
    //获取地址栏参数
    getUrlParam(paraName) {
      var url = document.location.toString();
      var arrObj = url.split("?");
      if (arrObj.length > 1) {
        var arrPara = arrObj[1].split("&");
        var arr;
        for (var i = 0; i < arrPara.length; i++) {
          arr = arrPara[i].split("=");
          if (arr != null && arr[0] == paraName) {
            return arr[1];
          }
        }
        return "";
      } else {
        return "";
      }
    },
    //错误弹窗
    messageAlert(msg) {
      this.$message.error(msg);
    },
    //成功弹窗
    successfulAlert(msg) {
      this.$message({
        message: msg,
        type: "success"
      });
    }
  }
};
</script>

<style>
</style>
